<template>
  <IntegratedTable
    ref="tableRef"
    v-model:pagination="pagination"
    :data-source="list"
    :columns="columns"
    :loading="loading"
    :total="total"
    :filter="filterConfig"
    bordered
    :checkable="false"
    @filter-change="onFilterChange">
    <template #top-tools-right>
      <slot name="top-tools-right"></slot>
    </template>
    <template #bodyCell="{ column: { dataIndex }, record, text }">
      <template v-if="dataIndex === 'use_money' || dataIndex === 'know_month_money'">
        <number-label :value="text" tooltip-prefix="￥" />
      </template>
      <template v-if="dataIndex === 'yearMonth'">{{ record.year }}年{{ record.month }}月</template>
      <template v-if="dataIndex === 'updated_at'">
        <date-relative-label :value="text" />
      </template>
      <template v-if="dataIndex === 'operator'">
        <HeadPortrait
          v-if="text"
          :id="text.id"
          :name="text.name"
          :head-img-name="text.head_img_name" />
      </template>
      <template v-if="dataIndex === 'action'">
        <a-button type="link" :icon="EditIcon" @click="onEdit(record as CapitalManage)"></a-button>
        <a-popover
          v-model:open="record.visible"
          placement="left"
          title="是否删除？"
          trigger="click">
          <template #content>
            <a-button
              danger
              type="link"
              size="small"
              :loading="deleteLoading"
              @click="deleteSubmit([record.id], 'ids')">
              删除
            </a-button>
          </template>
          <a-button danger type="link" size="small" :icon="DeleteIcon"></a-button>
        </a-popover>
      </template>
    </template>
  </IntegratedTable>
</template>

<script setup lang="ts">
import {
  IntegratedTable,
  DateRelativeLabel,
  NumberLabel,
  HeadPortrait,
  type RowKey,
} from '@ykst/components';
import { useList, useDeleteConfirm, type useListEmits } from '@/hooks/curd';
import { iconifyToAntdvIconVNode } from '@ykst/shared';
import { capitalManage, type CapitalManage } from '@/apis/capitalManage';
//删除的时候的加载状态
const cLoading = ref(false);
//表头的数据
import { columns, filterConfig } from './columns';
const emit = defineEmits<useListEmits<CapitalManage>>();
//图标
const EditIcon = iconifyToAntdvIconVNode('i-ant-design:edit-outlined');
const DeleteIcon = iconifyToAntdvIconVNode('i-ant-design:delete-outlined');
//分页的总条数
const total = ref(10);
//table的ref
const tableRef = ref(null);
//表格的加载状态
const loading = ref(false);
//表格的数据
const list = [
  {
    key: '1',
    yearMonth: 178289392,
    pro_name: '华专利',
    use_money: '12000',
    duration_month: '10',
    know_month_money: '1035',
    updated_at: 1828291,
    year: '2023',
    month: '11',
    operator: {
      id: 1,
      name: '周盼盼',
      head_img_name: 'zhou',
    },
    // action: '周盼盼',
  },
];
//分页的数据
const pagination = ref({
  current: 1,
  pageSize: 5,
  total: 50,
});
//onEdit事件是父组件传递的edit事件编辑
const { onFilterChange, onEdit, resetPageAndRefresh } = useList(capitalManage, emit);
const {
  loading: deleteLoading,
  deleteConfirm,
  deleteSubmit,
} = useDeleteConfirm(
  capitalManage,
  {
    success: resetPageAndRefresh,
  },
  '项目形式',
);
defineExpose({
  refresh: resetPageAndRefresh,
});
</script>

<style lang="scss" scoped></style>
